<template>
    <div class="cooperation">
        <div class="cooperation_banner"></div>
        <div class="cooperation_mainpart_wrap">
            <div class="cooperation_mainpart">
                <div class="cooperation_mainpart_title">
                    <p class="title">
                        <a href="/">首页</a>
                        <span class="one">></span>
                        <span class="two">合作企业</span>
                    </p>
                    <p class="line">
                        <span class="left"></span>
                        <span class="right"></span>
                    </p>
                </div>
                <div class="cooperation_mainpart_logo" v-for="item in imgs" :key="item.id">
                    <img :src="'http://itdahua.com'+ item.icon" alt="">
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import axios from "axios"
import Footer from '@/components/footer/Footer.vue'
export default {
    name:"cooperation",
    data(){
        return {
            imgs:[]
        }
    },
     components:{
    Footer

  },
    async created() {
    let res = await axios.get('api/co/list?Content-Type=multipart%2Fform-data');
    this.imgs = res.data.data    
  },
}
</script>

<style lang="scss" scope>
.cooperation{    
    width: 100%;
    min-width: 1200px;
    overflow: hidden;
    .cooperation_banner{
        min-width: 1200px;
        width: 100%;
        height: 475px;
        position: relative;
        z-index: 1;
        background: url(http://itdahua.com/img/banner.aa6b81de.png);
        background-size: cover;
        background-position: 50%;
    }
    .cooperation_mainpart_wrap{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: -120px;
        z-index: 66;
        margin-bottom: 45px;
        .cooperation_mainpart{
            max-width: 1200px;
            min-width: 1200px;
            background-color: #fff;
            .cooperation_mainpart_title{
                padding-top: 38px;
                .title{
                    font-size: 12px;
                    padding-left: 84px;
                    font-weight: bolder;
                    a{
                        color: #666;
                        text-decoration: none;
                    }
                    .one{
                        padding-left: 6px;
                    }
                    .two{
                        padding-left: 6px;
                    }
                }
                .line{
                    padding-top: 30px;
                    padding-left: 70px;
                    width: 185px;
                    height: 4px;
                    display: flex;
                    .left{
                        width: 65px;
                        height: 4px;
                        display: inline-block;
                        background-color: #4dc1e9;
                    }
                    .right{
                        width: 120px;
                        height: 4px;
                        display: inline-block;
                        background-color: #348bcc;
                    }
                }
            }
            .cooperation_mainpart_logo{
                display: flex;
                justify-content: center;
                padding-top: 74px;
                img{
                    width: 932px;
                }
            }
        }
    }
}
</style>